<template>
  <div class="wrapper">
       <div class="content">
         <header>
              <PageHeader></PageHeader>
         </header>
         <footer>
              <div class="left">
                  <MonthIncome> </MonthIncome>
              </div>
              <div class='right'>
                  <DayIncome></DayIncome>
              </div>
         </footer>
       </div>
  </div>
</template>

<script>
import PageHeader from '@/components/CounterHeader/header'
import MonthIncome from '@/components/MonthIncom/monthIncom'
import DayIncome from '@/components/DayIncome/dayIncome'
export default {
  components:{
    PageHeader,
    MonthIncome,
    DayIncome
  },
  data () {
    return {
  
    }
  },
   methods: {

   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper {
   height: 100%;
   padding: 45px 60px 45px 40px;
   box-sizing: border-box;
}
.content {
   height: 100%;
}
header {
  height: 40%;
  width: 100%;
  background:url('../assets/header2.png') no-repeat;
  background-size: 100% 100%;
}
footer {
  height: 60%;
  display: flex;
  flex-direction: row;
}
.left {
  flex: 7;
  /* background: blue; */
  height: 100%;
  padding-top: 40px;
  box-sizing: border-box;
  margin-right: 15px;
}
.right{
  flex: 5;
  height: 100%;
  padding-top: 40px;
  box-sizing: border-box;
  margin-right: 15px;
}
</style>
